article {
  flex: 1;
  max-width: 800px;
  color: var(--page-txt-color);
  
  @media screen {
    @media (min-width: 1500px) {
      margin: 0 auto;
    }
  }
  
  h1, h2, h3, h4, h5, h6, strong {
    margin: 1.5em 0 0;
    color: var(--page-txt-color);
    font-weight: 400;
    transition: border-color .4s ease-in-out;
  }

  strong {
    font-weight: 600;
    line-height: 2;
  }

  h1 {
    padding-bottom: .4em;
    font-size: 32px;
    line-height: 1em;
    border-bottom: 2px solid var(--article-line-color);
  }
  h2 {
    padding-bottom: .4em;
    font-size: 28px;
    line-height: 1em;
    border-bottom: 1px solid var(--article-line-color);
  }
  h3 {
    font-size: 24px;
  }
  h4 {
    font-size: 18px;
  }
  h5 {
    font-size: 16px;
  }
  h6 {
    font-size: 14px;
  }

  hr {
    margin: .5rem 0;
    border: none;
    border-bottom: 2px solid var(--article-line-color);
  }

  p {
    margin: 1em 0;
    line-height: 1.7;
  }

  ul, ol {
    padding: 0 0 0 20px;
    margin: 10px 0;
    font-size: 14px;
    list-style-type: disc;

    li {
      line-height: 1.7;

      p {
        margin: 0 0 .8em;

        &:first-child {
          margin-top: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    ul {
      list-style-type: circle;
      padding-left: 1em;

      ul {
        list-style-type: square;
      }
    }
  }

  a {
    color: #42b983;
    border-bottom: 1px double;

    &:hover {
      border-bottom-width: 3px;
    }
  }

  table {
    margin: 1rem 0;
    width: 100%;
    max-width: 100%;
    color: var(--page-txt-color);

    thead {
      tr {
        th {
          padding: 8px;
          font-size: 16px;
          text-align: left;
          vertical-align: bottom;
          border: 1px solid var(--table-header-bg);
          background-color: var(--table-header-bg);
          transition: 
            background-color .3s ease-in-out,
            border-color .3s ease-in-out;
        }
      }
    }
    tbody {
      tr {
        td {
          padding: 8px;
          font-size: 14px;
          line-height: 1.6;
          vertical-align: top;
          transition: background-color .3s ease-out;
          
          &:nth-child(1),
          &:nth-child(2) {
            white-space: nowrap;
          }
        }
        &:nth-child(2n) {
          td {
            background-color: var(--table-even-bg);
          }
        }
      }
    }
  }

  mark {
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    background-color: #ff9800;
  }

  // Emphasis
  em {
    font-style: italic;
  }

  .vbook-warning-box,
  .vbook-error-box,
  blockquote {
    margin: 1em 0;
    padding: .5em 0 .5em 1em;
    border-left: 5px solid var(--article-blockquote-color);
    background-color: var(--article-blockquote-bg);

    ul {
      padding-left: 2em;
      line-height: 1.6;
      list-style: disc;
    }

    p {
      margin: 0;
      color: var(--page-txt-color);
    }

    code {
      background-color: var(--blockquote-code);
    }

  }

  .vbook-warning-box {
    border-color: #f90;
    background-color: rgba(255,229,100, .3);
  }
  .vbook-error-box {
    border-color: #F44336;
    background-color: rgba(244, 67, 54, 0.1);
  }

  img {
    margin: 1em 0;
    max-width: 100%;
  }

  code {
    padding: 0 5px 2px;
    color: var(--code-inline-txt);
    border-radius: 5px;
    white-space: nowrap;
    background-color: var(--code-inline-bg);
    transition: 
      color .3s ease-in-out, 
      background-color .3s ease-in-out;
  }

  pre[class*="language"] {
    position: relative;
    display: block;
    padding: 1rem .7rem;
    margin: 1rem 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--code-txt-color);
    word-break: break-all;
    word-wrap: break-word;
    background-color: var(--code-pre-bg);
    border-radius: 5px;
    text-shadow: none;

    &:before {
      position: absolute;
      right: 1em;
      top: .5em;
      font-size: .7em;
      color: var(--code-lang-color);
    }

    code {
      padding: 0;
      font-size: inherit;
      color: inherit;
      white-space: pre-wrap;
      background-color: transparent;
      border-radius: 0;
    }

    .token.operator {
      background-color: transparent!important;
    }
    .token.property, 
    .token.tag, 
    .token.boolean, 
    .token.number, 
    .token.constant, 
    .token.symbol, 
    .token.deleted {
      color: var(--code-token-tag) !important;
    }
    .token.atrule, 
    .token.attr-value, 
    .token.keyword {
      color: var(--code-token-value) !important;
    }
    .token.selector, 
    .token.attr-name, 
    .token.string, 
    .token.char, 
    .token.builtin, 
    .token.inserted {
      color: var(--code-token-name) !important;
    }
    .token.function, .token.class-name {
      color: var(--code-token-function) !important;
    }
  }

  // 按键提示效果
  kdb {
    display: inline-block;
    padding: 3px 5px;
    line-height: 10px;
    color: #444d56;
    vertical-align: middle;
    background-color: #fafbfc;
    border: 1px solid #d1d5da;
    border-bottom-color: #c6cbd1;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #c6cbd1;
  }

  pre[class~=language-js]:before {
    content: "js"
  }

  pre[class~=language-ts]:before {
    content: "ts"
  }

  pre[class~=language-html]:before {
    content: "html"
  }

  pre[class~=language-md]:before {
    content: "md"
  }

  pre[class~=language-vue]:before {
    content: "vue"
  }

  pre[class~=language-css]:before {
    content: "css"
  }

  pre[class~=language-sass]:before {
    content: "sass"
  }

  pre[class~=language-scss]:before {
    content: "scss"
  }

  pre[class~=language-less]:before {
    content: "less"
  }

  pre[class~=language-stylus]:before {
    content: "stylus"
  }

  pre[class~=language-go]:before {
    content: "go"
  }

  pre[class~=language-java]:before {
    content: "java"
  }

  pre[class~=language-c]:before {
    content: "c"
  }

  pre[class~=language-sh]:before {
    content: "sh"
  }

  pre[class~=language-yaml]:before {
    content: "yaml"
  }

  pre[class~=language-py]:before {
    content: "py"
  }

  pre[class~=language-javascript]:before {
    content: "js"
  }

  pre[class~=language-typescript]:before {
    content: "ts"
  }

  pre[class~=language-markup]:before {
    content: "html"
  }

  pre[class~=language-markdown]:before {
    content: "md"
  }

  pre[class~=language-json]:before {
    content: "json"
  }

  pre[class~=language-ruby]:before {
    content: "rb"
  }

  pre[class~=language-python]:before {
    content: "py"
  }

  pre[class~=language-bash]:before {
    content: "bash"
  }

  pre[class~=language-diff]:before {
    content: "diff"
  }
}

